<template>
  <div class="titleDiv">
    <!-- 两端对齐 -->
    <van-row type="flex" justify="space-between">
      <van-col span="20">
        <!-- left-icon="search" -->
        <van-field
          class="searchDiv"
          @input="inputValFn"
          v-model="searchInput_v"
          placeholder="好货内部价"
          @keyup.enter="submitFn"
        >
          <!-- 搜索 -->
          <template v-slot:left-icon>
            <van-icon name="search" class="searchIconLeft" />
          </template>
          <!-- 清空搜索框 -->
          <template #button>
            <van-icon
              v-show="isCloseShow"
              name="close"
              style="font-size:.5rem;"
              @click="clear_search_inputFn"
            />
          </template>
        </van-field>
        <ul class="searchsel">
          <li class="searchli" v-for="(item ,i) in searchlist" :key="i">
            <span>{{item.name}}</span>
            {{item.price === '' ? '' : '￥'+item.price}}
          </li>
        </ul>
      </van-col>
      <van-col span="3">
        <van-button class="cancleBtn" type="primary" size="mini" @click="goback">取消</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "searchPage",
  data() {
    return {
      baseurl: process.env.VUE_APP_BASE_URL,
      searchInput_v: "",
      input_v: "",
      msg: "第二版xxx",
      isCloseShow: false,
      searchlist: []
    };
  },
  created() {
    // axios.get("http://localhost:3344/aa").then(_d => {
    //   console.log(_d.data);
    // });
  },
  watch: {
    input_v() {
      this.isCloseShow = true;
      if (this.searchInput_v) {
        // 输入框里是否有内容
        this.submitFn(); // 有内容 执行搜索方法
      } else {
        this.searchlist = []; //没内容 清空显示列表
      }
    }
  },
  methods: {
    goback() {
      this.$router.back(-1);
    },
    // 回车搜索
    submitFn() {
      axios
        .get(`${this.baseurl}/search`, {
          params: { search_key: this.input_v }
        })
        .then(_d => {
          this.searchlist = _d.data; // 把请求到的结果赋值给 显示列表
        });
    },
    // 清空输入
    clear_search_inputFn() {
      this.searchInput_v = "";
      this.isCloseShow = false;
      this.searchlist = [];
    },
    // 监听有没有治
    inputValFn(_v) {
      this.input_v = _v;
    }
  }
};
</script>

<style lang="scss" scoped>
.titleDiv {
  padding: 0.2rem 0.4rem;
}

.cancleBtn {
  width: 0.98667rem;
  height: 0.53333rem;
  line-break: 0.53333rem;
  color: #dd1a21;
  border: 1px solid #fff;
  border-radius: 0.10667rem;
  font-size: 0.4rem;
  background-color: #fff;
  margin-top: 0.1rem;
}

// .van-row /deep/ .van-icon-search {
//   font-size: 0.6rem;
//   line-height: 0.8rem;
// }

.searchDiv {
  padding-top: 0.01rem;
  padding-left: 0.15rem;
  padding-bottom: 0;
  border: 0;
  background-color: #f4f4f4;
  height: 0.74667rem;
  line-height: 0.74667rem;
  border-radius: 4px;
  font-size: 0.37333rem;
}
.searchIconLeft {
  font-size: 0.5rem !important;
}

// .van-row /deep/ input {
//   //   height: 0.7rem;
//   margin-left: 0.2rem;
//   font-size: 0.42rem;
//   padding-bottom: 0.3rem;
// }
.searchsel {
  width: 100%;
  box-sizing: border-box;
  padding-left: 10%;
}
.searchli {
  width: 80%;
  height: 0.3rem;
  padding: 0.1rem;
  margin: 0.1rem 0;
  font-size: 0.36rem;
  color: #dd1a21;
  text-align: left;
  display: flex;
  justify-content: space-between;
  // padding: 0 10%;
}
</style>